<template>
  <div class="p-login">
    <div class="login-menu">
      <common-config></common-config>
    </div>
    <!-- <Particles></Particles> -->
    <transition name="animate_form">
      <div v-if="showForm" class="c-login-form">
        <div class="b-logo">
          <img src="../../assets/img/login/left-image.png" alt="" width="500px" />
        </div>
        <div class="b-form">
          <div class="c-title">
            {{ $t('Message.Login.Title') }}
            <p>竞赛视频调度系统</p>
            <el-divider />
          </div>
          <div class="c-form">
            <el-form
              ref="loginFormRef"
              :model="loginForm"
              :rules="loginRules"
              label-width="auto"
              status-icon
            >
              <el-form-item label="" prop="name" class="form-item">
                <el-input v-model="loginForm.name" :placeholder="$t('Message.Login.Name')">
                  <template #prefix>
                    <el-icon class="el-input__icon"><User /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="password" class="form-item">
                <el-input
                  v-model="loginForm.password"
                  :placeholder="$t('Message.Login.Password')"
                  type="password"
                >
                  <template #prefix>
                    <el-icon class="el-input__icon"><Lock /></el-icon>
                  </template>
                </el-input>
              </el-form-item>
              <el-form-item label="" prop="code" class="form-item">
                <div class="f-code">
                  <el-input v-model="loginForm.code" :placeholder="$t('Message.Login.Code')">
                    <template #prefix>
                      <el-icon class="el-input__icon"><Key /></el-icon>
                    </template>
                  </el-input>
                  <img style="width: 120px; height: 50px" :src="codeContent" @click="getAuthCode" />
                  <!-- <el-button round color="#337dff" @click="getAuthCode">{{
                    $t('Message.Btn.Btn2')
                  }}</el-button> -->
                </div>
              </el-form-item>
            </el-form>
          </div>
          <div class="c-btn">
            <el-button class="login-form-btn" round type="primary" @click="login(loginFormRef)">
              {{ $t('Message.Btn.Btn1') }}
            </el-button>
            <div class="tips-text">
              {{ $t('Message.Tips.Msg1') }}
              <span class="protocol">{{ $t('Message.Tips.Msg2') }}</span>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import Particles from '@/components/particles/index.vue'
import commonConfig from '../../components/commonConfig.vue'
import Storage from '@/assets/js/storage'
const { proxy } = getCurrentInstance()
import { useRouter } from 'vue-router'
import Config from '../../assets/js/config'

const router = useRouter()
const showForm = ref(false)
// const codeBtnStatus = ref(false)
const codeContent = ref(null)

onMounted(() => {
  getAuthCode()
  showForm.value = true
})
// 绑定表单中的ref，校验表单
const loginFormRef = ref()

const loginForm = reactive({
  name: '',
  password: '',
  code: '',
  token: '',
})

const loginRules = reactive({
  name: [{ required: true, trigger: 'change', message: proxy.$t('Message.Msg.Msg1') }],
  password: [{ required: true, trigger: 'change', message: proxy.$t('Message.Msg.Msg2') }],
  code: [{ required: true, trigger: 'change', message: proxy.$t('Message.Msg.Msg3') }],
})

const getAuthCode = () => {
  proxy
    .$post(Config.apiList.getCaptcha)
    .then((res) => {
      codeContent.value = res.data
      loginForm.token = res.token
    })
    .catch((error) => {
      ElMessage.error(error || errorMessage)
    })
}

const login = (formEl) => {
  if (!formEl) {
    return
  }
  formEl.validate((valid) => {
    if (valid) {
      let data = {
        name: loginForm.name,
        password: loginForm.password,
        code: loginForm.code,
        token: loginForm.token,
      }
      proxy
        .$post(Config.apiList.login, data)
        .then((res) => {
          Storage.set('access_token', res.access_token)
          Storage.set('userInfo', JSON.stringify(res.data))
          router.push({
            name: 'device',
          })
        })
        .catch((error) => {
          ElMessage.error(error.msg || error)
        })
    }
  })
}
</script>

<style lang="scss" scoped>
// @import '@/assets/scss/login/login';
</style>
